<template>
	<view>
		<view class="list-item">
			<text class="list-item-title">收货人</text>
			<input class="list-item-content" v-model="addressInfo.userName" placeholder="请输入收货人" maxlength="20" placeholder-class="list-item-content-input-placeholder" />
		</view>
		<view class="list-item">
			<text class="list-item-title">手机号码</text>
			<input class="list-item-content" placeholder="请输入手机号码" maxlength="11" v-model="addressInfo.telNumber" placeholder-class="list-item-content-input-placeholder" />
		</view>
		<view class="list-item">
			<text class="list-item-title">所在地区</text>
			<picker class="list-item-content" @change="bindPickerChange" :value="region" mode="region">
				<view class="uni-input" v-if="region">{{ region }}</view>
				<view class="uni-input-tips" v-else>请选择地址</view>
			</picker>
		</view>
		<view class="list-item" style="border-bottom: unset;">
			<text class="list-item-title">详细地址</text>
			<input class="list-item-content" placeholder="请输入详细地址" v-model="addressInfo.detailInfo" placeholder-class="list-item-content-input-placeholder" />
		</view>
		<!-- <view>
			<view style="margin-left: 20rpx;margin-top: 20rpx;">设为默认地址</view>
			<view style="display: flex;margin: 20rpx;">
				<text style="color: #999;">提醒：每次下单时会使用该地址</text>
				<switch style="margin-left: auto;" v-model="isDefault"></switch>
			</view>
		</view> -->
		<view class="add-address bottom-change-view" @click="$noMultipleClicks(saveAddress)">保存</view>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow, verifyPhoneNumber } from '@/config/common.js';
import { getAppAddressInfo, saveAppAddress,editAppAddress } from '@/constant/customer.js';
export default {
	data() {
		return {
			region: '',
			isDefault: false,
			addressInfo: {
				Id: '',
				customerId: uni.getStorageSync('customerId'),
				userName: '',
				telNumber: '',
				provinceName: '',
				cityName: '',
				districtName: '',
				detailInfo: '',
				nationalCode: '',
				isDefault: 0
			}
		};
	},
	onLoad(option) {
		if (!isLogin()) {
			toLogin();
		} else {
			if (option.addressId) {
				this.addressInfo.id = option.addressId;
				this.getAddressInfo();
			}
		}
	},
	methods: {
		bindPickerChange(e) {
			this.region = [];
			this.region = e.target.value;
			if (this.region.length > 0) {
				this.addressInfo.provinceName = this.region[0];
			}
			if (this.region.length > 1) {
				this.addressInfo.cityName = this.region[1];
			}
			if (this.region.length > 2) {
				this.addressInfo.districtName = this.region[2];
			}
			this.region = e.target.value.join(',');
		},
		async getAddressInfo() {
			 let res= await getAppAddressInfo({ id: this.addressInfo.id });
			 this.addressInfo=res.data
			 this.isDefault=this.addressInfo.isDefault==1?true:false
			 console.log(this.isDefault,'this.isDefault=')
			this.region = this.addressInfo.provinceName + ',' + this.addressInfo.cityName + ',' + this.addressInfo.districtName;
		},
		async saveAddress() {
			if (!this.addressInfo.userName) {
				errorToShow('请填写收货人');
				return;
			}
			if (!this.addressInfo.telNumber) {
				errorToShow('请填写手机号码');
				return;
			}
			if (!verifyPhoneNumber(this.addressInfo.telNumber)) {
				errorToShow('手机号码格式不正确');
				return;
			}
			if (!this.addressInfo.provinceName || !this.addressInfo.cityName || !this.addressInfo.districtName) {
				errorToShow('请选择完整地址');
				return;
			}
			if (!this.addressInfo.detailInfo) {
				errorToShow('请填写详细地址');
				return;
			}
			
			this.addressInfo.customerId=this.isDefault?1:0
			this.addressInfo.customerId=uni.getStorageSync('customerId')
			let result;
			
			if(!this.addressInfo.id){
				result=await saveAppAddress(this.addressInfo);
			}else{
				result=await editAppAddress(this.addressInfo);
			}
			
			if(result.code==0){
				successToShow('保存成功', res => {
					uni.navigateBack({
						delta: 1
					});
				});
			}else{
				errorToShow(result.msg)
			}
			
		}
	}
};
</script>

<style scoped lang="scss">
.list-item {
	display: flex;
	align-items: center;
	font-size: $main-text-size-32;
	color: $main-text-color-gray-33;
	height: 90rpx;
	background-color: #fff;
	border-bottom: 2rpx solid $main-page-color;

	&-title {
		margin-right: auto;
		margin-left: 20rpx;
	}

	&-content {
		margin-right: 20rpx;
		width: 500rpx;
		text-align: right;
	}
}

.uni-input-tips {
	color: $main-text-color-grey;
	font-size: $main-text-size-32;
}

/deep/ .list-item-content-input-placeholder {
	color: $main-text-color-grey;
	font-size: $main-text-size-32;
}

.add-address {
	position: fixed;
	bottom: 20rpx;
	width: 670rpx;
	left: 40rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: $main-theme-color-green;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
